<template>
  <div
      :class="['video-item',layoutType==1?'video-item2':'']"
      :style="{'margin-top':props.marginTop+'px'}"
  >
    <router-link :to="`/video/${data.videoId}`" :target="'_blank'">
      <div class="cover">
        <Cover :source="`${ImgURL}/img/${data.videoCover}`"
               :width="viodwidow -10" :height="viodwidow -15"
               :item=1
               :loading="loading||imgloading"></Cover>
        <div class="shade">
          <div class="play-count" v-show="layoutType==0">
            <div class="iconfont">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff" class="bili-video-card__stats--icon"><!--[--><path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path><path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path><!--]--></svg>
              {{data.playCount}}
            </div>
            <div style="margin-left: 10px" class="iconfont">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff" class="bili-video-card__stats--icon"><!--[--><path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path><path d="M15.875 10.75L9.875 10.75C9.46079 10.75 9.125 10.4142 9.125 10C9.125 9.58579 9.46079 9.25 9.875 9.25L15.875 9.25C16.2892 9.25 16.625 9.58579 16.625 10C16.625 10.4142 16.2892 10.75 15.875 10.75z" fill="currentColor"></path><path d="M17.375 14.75L11.375 14.75C10.9608 14.75 10.625 14.4142 10.625 14C10.625 13.5858 10.9608 13.25 11.375 13.25L17.375 13.25C17.7892 13.25 18.125 13.5858 18.125 14C18.125 14.4142 17.7892 14.75 17.375 14.75z" fill="currentColor"></path><path d="M7.875 10C7.875 10.4142 7.53921 10.75 7.125 10.75L6.625 10.75C6.21079 10.75 5.875 10.4142 5.875 10C5.875 9.58579 6.21079 9.25 6.625 9.25L7.125 9.25C7.53921 9.25 7.875 9.58579 7.875 10z" fill="currentColor"></path><path d="M9.375 14C9.375 14.4142 9.03921 14.75 8.625 14.75L8.125 14.75C7.71079 14.75 7.375 14.4142 7.375 14C7.375 13.5858 7.71079 13.25 8.125 13.25L8.625 13.25C9.03921 13.25 9.375 13.5858 9.375 14z" fill="currentColor"></path><!--]--></svg>
              {{data.danmuCount}}
            </div>
          </div>
          <div class="play-time">{{data.lastPlayTime}}</div>
        </div>
      </div>
    </router-link>
    <div :class="['video-info',layoutType==1?'video-info-coptain':'']">
      <div>
        <router-link class="title"
                     :to="`/video/${data.videoId}`"
                     v-html="data.videoName"
                     target="_blank"></router-link>
        <router-link
            class="user-name"
            :to="`/user/${data.userId}`"
            target="_blank">
          <span class="iconfont icon-upzhu" :style="{'margin-top':layoutType==1?'0px':''}"><span style="margin-left: 5px"></span>{{data.nickName}} · {{proxy.Utils.formatDate(data.createTime)}}</span>
        </router-link>
      </div>
      <div class="shade-right" v-if="layoutType==1" style="margin-top: 8px">
        <div class="right-count">
          <div class="iconfont">
            <svg class="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" width="18" height="18"><path d="M9 3.7485375000000003C7.111335 3.7485375000000003 5.46225 3.84462 4.2981675 3.939015C3.4891575 4.0046175 2.8620825 4.6226400000000005 2.79 5.424405C2.7045525 6.37485 2.625 7.6282499999999995 2.625 8.9985C2.625 10.368825000000001 2.7045525 11.622225 2.79 12.5726625C2.8620825 13.374412500000002 3.4891575 13.992450000000002 4.2981675 14.058074999999999C5.46225 14.152425000000001 7.111335 14.2485 9 14.2485C10.888874999999999 14.2485 12.538050000000002 14.152425000000001 13.702200000000001 14.058037500000001C14.511074999999998 13.9924125 15.138000000000002 13.3746 15.210075 12.573037500000002C15.295499999999999 11.622975 15.375 10.3698375 15.375 8.9985C15.375 7.627237500000001 15.295499999999999 6.3740775 15.210075 5.4240375C15.138000000000002 4.622475 14.511074999999998 4.00464 13.702200000000001 3.9390374999999995C12.538050000000002 3.844635 10.888874999999999 3.7485375000000003 9 3.7485375000000003zM4.2072375 2.8176975C5.39424 2.7214425 7.074434999999999 2.6235375000000003 9 2.6235375000000003C10.925775 2.6235375000000003 12.606075 2.7214575 13.793099999999999 2.81772C15.141074999999999 2.92704 16.208849999999998 3.9695849999999995 16.330575 5.323297500000001C16.418174999999998 6.297675 16.5 7.585537500000001 16.5 8.9985C16.5 10.4115375 16.418174999999998 11.6994 16.330575 12.6738C16.208849999999998 14.027474999999999 15.141074999999999 15.0700125 13.793099999999999 15.1793625C12.606075 15.275625 10.925775 15.3735 9 15.3735C7.074434999999999 15.3735 5.39424 15.275625 4.2072375 15.179400000000001C2.859045 15.070049999999998 1.7912325 14.027212500000001 1.6695225000000002 12.673425C1.5818849999999998 11.69865 1.5 10.4106 1.5 8.9985C1.5 7.586475 1.5818849999999998 6.2984025 1.6695225000000002 5.3236725C1.7912325 3.96984 2.859045 2.9270175000000003 4.2072375 2.8176975z" fill="currentColor"></path><path d="M11.035350000000001 8.2265625C11.6307375 8.570325 11.6307375 9.42975 11.0353125 9.773475L8.652149999999999 11.149425C8.0567625 11.49315 7.3125 11.063475 7.3125075 10.37595L7.3125075 7.624124999999999C7.3125075 6.936607500000001 8.0567625 6.5069025 8.652149999999999 6.850664999999999L11.035350000000001 8.2265625z" fill="currentColor"></path></svg>
            <span class="text">{{data.playCount}}</span>
          </div>
          <div class="iconfont">
            <svg class="dm"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" width="18" height="18"><path d="M9 3.7485375000000003C7.111335 3.7485375000000003 5.46225 3.84462 4.2981675 3.939015C3.4891575 4.0046175 2.8620825 4.6226400000000005 2.79 5.424405C2.7045525 6.37485 2.625 7.6282499999999995 2.625 8.9985C2.625 10.368825000000001 2.7045525 11.622225 2.79 12.5726625C2.8620825 13.374412500000002 3.4891575 13.992450000000002 4.2981675 14.058074999999999C5.46225 14.152425000000001 7.111335 14.2485 9 14.2485C10.888874999999999 14.2485 12.538050000000002 14.152425000000001 13.702200000000001 14.058037500000001C14.511074999999998 13.9924125 15.138000000000002 13.3746 15.210075 12.573037500000002C15.295499999999999 11.622975 15.375 10.3698375 15.375 8.9985C15.375 7.627237500000001 15.295499999999999 6.3740775 15.210075 5.4240375C15.138000000000002 4.622475 14.511074999999998 4.00464 13.702200000000001 3.9390374999999995C12.538050000000002 3.844635 10.888874999999999 3.7485375000000003 9 3.7485375000000003zM4.2072375 2.8176975C5.39424 2.7214425 7.074434999999999 2.6235375000000003 9 2.6235375000000003C10.925775 2.6235375000000003 12.606075 2.7214575 13.793099999999999 2.81772C15.141074999999999 2.92704 16.208849999999998 3.9695849999999995 16.330575 5.323297500000001C16.418174999999998 6.297675 16.5 7.585537500000001 16.5 8.9985C16.5 10.4115375 16.418174999999998 11.6994 16.330575 12.6738C16.208849999999998 14.027474999999999 15.141074999999999 15.0700125 13.793099999999999 15.1793625C12.606075 15.275625 10.925775 15.3735 9 15.3735C7.074434999999999 15.3735 5.39424 15.275625 4.2072375 15.179400000000001C2.859045 15.070049999999998 1.7912325 14.027212500000001 1.6695225000000002 12.673425C1.5818849999999998 11.69865 1.5 10.4106 1.5 8.9985C1.5 7.586475 1.5818849999999998 6.2984025 1.6695225000000002 5.3236725C1.7912325 3.96984 2.859045 2.9270175000000003 4.2072375 2.8176975z" fill="currentColor"></path><path d="M11.90625 8.0625L7.40625 8.0625C7.0955924999999995 8.0625 6.84375 7.810649999999999 6.84375 7.5C6.84375 7.1893424999999995 7.0955924999999995 6.9375 7.40625 6.9375L11.90625 6.9375C12.2169 6.9375 12.46875 7.1893424999999995 12.46875 7.5C12.46875 7.810649999999999 12.2169 8.0625 11.90625 8.0625z" fill="currentColor"></path><path d="M13.03125 11.0625L8.53125 11.0625C8.220600000000001 11.0625 7.96875 10.810649999999999 7.96875 10.5C7.96875 10.189350000000001 8.220600000000001 9.9375 8.53125 9.9375L13.03125 9.9375C13.3419 9.9375 13.59375 10.189350000000001 13.59375 10.5C13.59375 10.810649999999999 13.3419 11.0625 13.03125 11.0625z" fill="currentColor"></path><path d="M5.90625 7.5C5.90625 7.810649999999999 5.6544075 8.0625 5.34375 8.0625L4.96875 8.0625C4.6580925 8.0625 4.40625 7.810649999999999 4.40625 7.5C4.40625 7.1893424999999995 4.6580925 6.9375 4.96875 6.9375L5.34375 6.9375C5.6544075 6.9375 5.90625 7.1893424999999995 5.90625 7.5z" fill="currentColor"></path><path d="M7.03125 10.5C7.03125 10.810649999999999 6.7794075000000005 11.0625 6.46875 11.0625L6.09375 11.0625C5.7830925 11.0625 5.53125 10.810649999999999 5.53125 10.5C5.53125 10.189350000000001 5.7830925 9.9375 6.09375 9.9375L6.46875 9.9375C6.7794075000000005 9.9375 7.03125 10.189350000000001 7.03125 10.5z" fill="currentColor"></path></svg>          </div>
          <span class="text" style="font-size: 12px;">{{data.danmuCount}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {ImgURL} from "@/utils/Request.js";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const viodwidow = ref()
const getViodwidow = () =>{
  let width = (document.documentElement.clientWidth - proxy.bodyPadding *2)*0.44;
  viodwidow.value = width / 2;
}
const props = defineProps({
  data:{
    type:Object,
    default:{}
  },
  layoutType:{
    type:Number,
    default: 0
    //1: 横向排列, 0: 纵向排列
  },
  marginTop:{
    type:Number,
    default: 0
  },
  loading:{
    type:Boolean
  }
})
const imgloading = ref(true);
onMounted(()=>{
  getViodwidow();
  //延迟3秒加载图片
  setTimeout(()=>{
    imgloading.value = false;
  },1000)
}),
onUnmounted(()=>{
  mitter.off('resize', getViodwidow);
})
//监听窗口大小变化，重新计算轮播图宽度
window.addEventListener("resize",()=>{
  getViodwidow();
});
</script>
<style scoped lang="scss">
.video-info-coptain{
  display: flex;
  flex-direction: column;
}
.shade-right{
  .right-count{
    display: flex;
    color: #61666d;
    .iconfont{
      display: flex;
      margin-right: 5px;
      .text{
        font-size: 12px;
        margin-left: 5px;
      }
      fill: #61666d;
      svg{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.video-item{
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  .cover{
    cursor:pointer;
    position: relative;
    overflow: hidden;
    .image-style{
      width:100%;
      height: 100%;
      overflow: hidden;
      border-radius: 5px;
    }
    .shade{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      box-sizing: border-box;
      padding: 8px 8px 6px;
      width: 100%;
      height: 38px;
      border-bottom-right-radius: 6px;
      border-bottom-left-radius: 6px;
      background-image: linear-gradient(180deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .8) 100%);
      color: #fff;
      opacity: 1;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .play-count{
        display: flex;
        .iconfont{
          font-size: 13px;
          display: flex;
          svg{
            margin-right: 5px;
            width: 18px;
            height: 18px;
          }
          &::before{
            font-size: 16px;
            margin-right: 2px;
          }
          .icon-danmu{
            margin-left: 15px;
          }
        }
      }
      .play-time{
        font-size: 13px;
      }
    }
  }
}
.video-info{
  cursor: pointer;
  .title{
    height: 40px;
    color: var(--text2);
    font-size: 14px;
    margin-top: 10px !important;
    display: -webkit-box;
    overflow: hidden;
    text-decoration: none;
    --webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word !important;
    word-break: break-all;
    line-break: anywhere;
    --webkit-line-clamp: 2;
    &:hover{
      color: #409EFF;
    }
    :deep(.highlight){
      color:red !important;
    }
  }
  .user-name{
    margin-top: 5px;
    color:#9499a0;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    &:hover{
      color: #409EFF;
    }
    .iconfont{
      font-size: 14px;
      margin-right: 5px;
      float: left;
      &::before{
        font-size: 13px;
      }
    }
  }
}
.video-item2{
  display: flex;
  .cover{
    width: 189px;
    height: 107px;
    margin-right: 15px;
    .image-panel{
      width: 200px !important;
      height: 110px !important;
    }
    .shade{
      justify-content: end;
    }
  }
}
.video-info{
  flex: 1;
  .title{
    margin-top: 0;
  }
  .play-count{
   display: flex;
    width: 100%;
    margin-top: 5px;
    color: #9499a0;
    .iconfont{
      font-size: 14px;
      &::before{
        font-size: 16px;
        margin-right: 2px;
      }
      .icon-danmu{
        margin-left: 15px;
      }
    }
  }
}
</style>